<template>
  <view class="check-box" @click="onCheckClick">
    <image :src="currImgSrc" :style="{ width: size + 'rpx', height: size + 'rpx' }" />
    <slot />
  </view>
</template>
<script setup>
  import { computed } from 'vue'

  // 圆形
  const roundList = {
    default: 'check-round.png',
    half: 'check-round-half.png',
    checked: 'check-round-checked.png',
  }
  // 圆形-deep
  const deepRoundList = {
    default: 'check-round-deep.png',
    checked: 'check-round-deep-checked.png',
  }

  // emits
  const emits = defineEmits('update:modelValue', 'update:allCheckIndeterminate', 'change')

  // 方形
  const squareList = {
    default: 'check-square.png',
    half: 'check-square-half.png',
    checked: 'check-square-checked.png',
  }

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    // 渲染类型
    renderType: {
      type: String,
      default: 'round', // round | deep-round | square
    },
    // 是否为半选状态
    indeterminate: {
      type: Boolean,
      default: false,
    },
    size: {
      type: [String, Number],
      default: 24,
    },
  })

  const currImgSrc = computed(() => {
    const status = props.indeterminate ? 'half' : props.modelValue ? 'checked' : 'default'
    let imgOption = []
    if (props.renderType === 'round') imgOption = roundList
    if (props.renderType === 'deep-round') imgOption = deepRoundList
    if (props.renderType === 'square') imgOption = squareList
    return '/static/images/free-deposit-code/' + imgOption[status]
  })

  const onCheckClick = () => {
    if (props.indeterminate) {
      emits('update:modelValue', true)
      emits('update:indeterminate', false)
    } else {
      emits('update:modelValue', !props.modelValue)
    }
    emits('change')
  }
</script>
<style lang="less" scoped></style>
